<template>
	<div>
		<t-form :data="formData" ref="form" @submit="onSubmit" :colon="true" :labeWidth="0">
			<!-- 员工信息 -->
			<div class="flex ml-4 justify-between items-center mt-8">
				<p class="text-base font-semibold">员工信息</p>
				<t-button @click="resetting()" variant="base" theme="default" class="mr-4">重置</t-button>
			</div>
			<t-divider></t-divider>
			<div class="mb-4 w-80 ml-4">
				<div class="text-gray-400 mb-2">员工相片</div>
				<div class="relative" v-if="userPhotoShow" style="width: 130px;height: 160px;">
					<BDMImage class="w-full h-full" :authSrc="user_photo"></BDMImage>
					<t-button 
					class="absolute bottom-2 text-white z-20" 
					theme="default" variant="base"
					style="left: 50%; margin-left: -44px;" 
					@click="uploadImg()"
					>更换相册</t-button>
					<div class="absolute top-0 left-0 bg-black z-10 opacity-10" style="width: 130px;height: 160px;"></div>
				</div>
				<t-form-item name="user_photo" v-if="!userPhotoShow">
					<t-upload 
						:action="`/my/addUserPhoto`" 
						v-model="userFile" 
						theme="image"
						tips="请上传文件大小不大于10M,尺寸为1寸(宽高比13:16)的png,jpg,gif图片" 
						@fail="handleFail" 
						:headers="token"
						name="user_photo" 
						showUploadProgress
						:sizeLimit="{ size: 10, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }" 
						@success="onSuccess"
						accept="image/*">
					</t-upload>
				</t-form-item>
			</div>
			<div class="flex ml-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">员工昵称<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="nick_name">
						<t-input 
						v-model="formData.nick_name" 
						placeholder="请输入员工昵称" 
						:status="nick_name_status"
						:tips="nick_name_tips" 
						:onBlur="nickNameBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">真实姓名<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="name">
						<t-input 
						v-model="formData.name" 
						placeholder="请输入真实姓名"
						:status="name_status"
						:tips="name_tips"
						:onBlur="nameBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">身份证号码</div>
					<t-form-item name="id_number">
						<t-input 
						v-model="formData.id_number" 
						placeholder="请输入身份证号码"
						:status="id_number_status"
						:tips="id_number_tips"
						:onBlur="idNumnerBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">性别<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="sex">
						<t-select v-model="formData.sex" placeholder="请选择性别" :options="sexOptions"></t-select>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">手机号码<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="phone">
						<t-input 
						v-model="formData.phone" 
						placeholder="请输入手机号码"
						:status="phone_status"
						:tips="phone_tips"
						:onBlur="phoneBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">出生日期</div>
					<t-form-item name="birth_date">
						<t-date-picker v-model="formData.birth_date" placeholder="请选择出生日期" class="w-full"></t-date-picker>
					</t-form-item>
				</div>
			</div>
			<div class="ml-4 mt-4" style="width: 42rem;">
				<div class="text-gray-400 mb-2">现居地址</div>
				<t-form-item name="address">
					<t-input v-model="formData.address" placeholder="请输入现居地址"></t-input>
				</t-form-item>
			</div>
			<!-- 岗位信息 -->
			<div class="text-base font-semibold ml-4 mt-12">岗位信息</div>
			<t-divider></t-divider>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">岗位名称<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="id_position">
						<t-select v-model="formData.id_position" placeholder="请选择岗位名称" :options="positionOptions"></t-select>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">所属部门<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="department">
						<t-cascader 
						v-model="department" 
						placeholder="请选择部门" 
						:options="departmentOptions"
						@change="onChange"
						></t-cascader>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">入职时间<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="entry_date">
						<t-date-picker v-model="formData.entry_date" placeholder="请选择入职时间" class="w-full"></t-date-picker>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">试用工资<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="try_out_money">
						<t-input 
						v-model="formData.try_out_money" 
						placeholder="请输入试用工资" 
						suffix="元"
						:status="try_out_money_status"
						:tips="try_out_money_tips"
						:onBlur="tryOutMoneyBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">试用合同</div>
					<t-form-item name="trial_contract">
						<t-upload 
						:action="`${serveHttp}/my/addPdf`" 
						accept="application/pdf" v-model="trialFile"
						tips="文件大小不大于10M，格式为pdf的文件" 
						@fail="handleFail" :headers="token" name="pdf"
						showUploadProgress :sizeLimit="{ size: 10, unit: 'MB', message: '文件大小不超过 {sizeLimit} MB' }"
						@success="trialOnSuccess" />
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">账号权限<span class="text-red-800 ml-2">*</span></div>
					<t-form-item name="id_authority">
						<t-select v-model="formData.id_authority" placeholder="请选择账号权限" :options="authorityOptions"></t-select>
					</t-form-item>
				</div>
			</div>
			<!-- 银行信息 -->
			<div class="text-base font-semibold ml-4 mt-12">银行信息</div>
			<t-divider></t-divider>
			<div class="flex ml-4 mt-4">
				<div class="mr-8 w-80">
					<div class="text-gray-400 mb-2">开户银行</div>
					<t-form-item name="bank">
						<t-input 
						v-model="formData.bank" 
						placeholder="请输入开户银行"
						:status="bank_status"
						:tips="bank_tips"
						:onBlur="bankBlur"
						></t-input>
					</t-form-item>
				</div>
				<div class="w-80">
					<div class="text-gray-400 mb-2">银行卡号</div>
					<t-form-item name="bank_number">
						<t-input 
						v-model="formData.bank_number" 
						placeholder="请输入银行卡号"
						:status="bank_number_status"
						:tips="bank_number_tips"
						:onBlur="bankNumberBlur"
						></t-input>
					</t-form-item>
				</div>
			</div>
			<div class="flex ml-4 mt-8 mb-16">
				<t-button class="mr-4" @click="goUserDataHome()" theme="default" variant="base">取消</t-button>
				<t-form-item>
					<t-button type="submit">提交</t-button>
				</t-form-item>
			</div>
		</t-form>
	</div>
</template>

<script>
	import { getToken } from '@/unit/auth'
	import BDMImage from '@/components/BDMImage'
	import { isName, isIdNumber, isvalidPhone, isNumber, isSpecial, isBankNumber } from '@/unit'
	import { serveHttp } from '@/unit/config'

	export default {
		name: 'UserInfoUpdate',
		components: {
			BDMImage,
		},
		data() {
			return {
				formData: {},
				// 性别选项
				sexOptions: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				// 权限选项
				authorityOptions: [],
				// 部门选中值
				department: '',
				// 头像文件
				userFile: [],
				// 合同文件
				trialFile: [],
				// 头像
				userPhotoShow: false,
				user_photo: '',
				// 提交弹出提示框
				mydialog: null,
				//// 校验
				nick_name_status: '',
				nick_name_tips: '',
				name_status: '',
				name_tips: '',
				id_number_status: '',
				id_number_tips: '',
				phone_status: '',
				phone_tips: '',
				try_out_money_status: '',
				try_out_money_tips: '',
				bank_status: '',
				bank_tips: '',
				bank_number_status: '',
				bank_number_tips: '',
				serveHttp: '',
				positionOptions: [],
				departmentOptions: []
			}
		},
		computed: {
			// 获取token设置请求头
			token() {
				let obj = {
					"Authorization": getToken()
				}
				return obj
			},
			// 提交判断
			isSubmit(){
				if (this.nickNameBlur() && this.idNumnerBlur() && this.phoneBlur() && this.tryOutMoneyBlur() && this.bankBlur()){
					return true
				} else {
					return false
				}
			},
			// 提交表单
			formDataSubmit() {
				return {
					phone: this.formData.phone,
					nick_name: this.formData.nick_name,
					name: this.formData.name,
					sex: this.formData.sex,
					id_number: this.formData.id_number,
					user_photo: this.formData.user_photo,
					bank: this.formData.bank,
					bank_number: this.formData.bank_number,
					address: this.formData.address,
					id_position: this.formData.id_position,
					id_department1: this.formData.id_department1,
					id_department2: this.formData.id_department2,
					entry_date: this.formData.entry_date,
					try_out_money: this.formData.try_out_money,
					trial_contract: this.formData.trial_contract,
					id_authority: this.formData.id_authority,
					birth_date: this.formData.birth_date,
					id: this.formData.id,
				}
			},
		},
		methods: {
			// 获取岗位
			getPositionOptions(){
				this.$store.dispatch('position/getPosition').then(res => {
					let arr = []
					const positionInfo = res.data
					for (let i = 0; i < positionInfo.length; i++) {
						arr[i] = {}
						arr[i].label = positionInfo[i].posttion_name
						arr[i].value = positionInfo[i].position_id
					}
					this.positionOptions = arr
					this.$store.dispatch('user/getDepartmentList').then(() => {
						this.departmentOptions = this.$store.state.user.DepartmentList
						this.getUserInfo(this.$route.query.id)
					})
				})
			},
			// 回到详情主页
			goUserDataHome() {
				this.$bus.emit('goUserDataHome')
			},
			// 昵称校验
			nickNameBlur() {
				if (this.formDataSubmit.nick_name === '') {
					this.nick_name_status = 'error'
					this.nick_name_tips = '昵称是必填项'
					return false
				} else {
					this.nick_name_status = ''
					this.nick_name_tips = ''
					return true
				}
			},
			// 姓名校验
			nameBlur(){
				if (!isName(this.formDataSubmit.name)) {
					this.name_status = 'error'
					this.name_tips = '请输入正常的中文姓名'
					return false
				} else {
					if (this.formDataSubmit.name === ''){
						this.name_status = 'error'
						this.name_tips = '姓名是必填项'
						return false
					} else {
						this.name_status = ''
						this.name_tips = ''
						return true
					}
				}
			},
			// 身份证号校验
			idNumnerBlur(){
				if(!isIdNumber(this.formDataSubmit.id_number)){
					this.id_number_status = 'error'
					this.id_number_tips = '请输入合法的二代身份证号码'
					return false
				} else {
					this.id_number_status = ''
					this.id_number_tips = ''
					return true
				}
			},
			// 手机校验
			phoneBlur(){
				if(this.formDataSubmit.phone === ''){
					this.phone_status = 'error'
					this.phone_tips = '手机号是必填项'
					return false
				} else {
					if(!isvalidPhone(this.formDataSubmit.phone)){
						this.phone_status = 'error'
						this.phone_tips = '请输入合法的手机号码'
						return false
					} else {
						this.phone_status = ''
						this.phone_tips = ''
						return true
					}
				}
			},
			// 试用工资校验
			tryOutMoneyBlur(){
				if(this.formDataSubmit.try_out_money === ''){
					this.try_out_money_status = 'error'
					this.try_out_money_tips = '试用工资是必填项'
					return false
				} else {
					if(!isNumber(this.formDataSubmit.try_out_money)){
						this.try_out_money_status = 'error'
						this.try_out_money_tips = '只能输入数字'
						return false
					} else {
						this.try_out_money_status = ''
						this.try_out_money_tips = ''
						return true
					}
				}
			},
			// 开户行校验
			bankBlur(){
				if(!isSpecial(this.formDataSubmit.bank)){
					this.bank_status = 'error'
					this.bank_tips = '请不要含有特殊字符'
					return false
				} else {
					this.bank_status = ''
					this.bank_tips = ''
					return true
				}
			},
			// 银行账号校验
			bankNumberBlur(){
				if(this.formDataSubmit.bank_number === ''){
					this.bank_number_status = ''
					this.bank_number_tips = ''
					return true
				} else {
					if(!isBankNumber(this.formDataSubmit.bank_number)){
						this.bank_number_status = 'error'
						this.bank_number_tips = '请输入正确的银行卡号'
						return false
					} else {
						this.bank_number_status = ''
						this.bank_number_tips = ''
						return true
					}
				}
			},
			// 提交业务
			onSubmit() {
				if (!this.isSubmit) {
					this.$message.error('您提交的信息中，存在不合法信息，请仔细检查')
					return
				}
				if (this.mydialog) {
					this.mydialog.show();
					return;
				}
				let username = ''
				for(let i = 0 ; i < this.$store.state.user.userInfoData[0].length ; i++){
					if(this.$route.query.id == this.$store.state.user.userInfoData[0][i].user_id){
						username = this.$store.state.user.userInfoData[0][i].nick_name
					}
				}
				this.mydialog = this.$dialog({
					header: '更新提示',
					body: `您即将要更新 ${username} 的个人信息，是否确认？`,
					style: 'color: rgba(0, 0, 0, 0.6)',
					onConfirm: () => {
						this.mydialog.hide();
						// 确认的逻辑行为
						if(!this.formDataSubmit.trial_contract){
							delete this.formDataSubmit.trial_contract
						}
						if(!this.formDataSubmit.address){
							delete this.formDataSubmit.address
						}
						if(!this.formDataSubmit.bank){
							delete this.formDataSubmit.bank
						}
						if(!this.formDataSubmit.bank_number){
							delete this.formDataSubmit.bank_number
						}
						if(!this.formDataSubmit.id_number){
							delete this.formDataSubmit.id_number
						}
						this.$store.dispatch('user/updateUser', this.formDataSubmit).then((res) => {
							if(res.status === 0){
								this.$store.dispatch('user/getUserList').then(() => {
									this.$message.success(res.message)
									this.$bus.emit('goUserDataHome')
									this.$bus.emit('getUserData')
								})
							} else {
								this.$message.error(res.message)
							}
						})
					},
				});
			},
			// 连级选择器
			onChange(val, context) {
				this.department = val
				this.$store.state.user.userInfoDataUpdate.id_department1 = val.split('.')[0]
				this.$store.state.user.userInfoDataUpdate.id_department2 = val.split('.')[1]
			},
			// 头像上传
			handleFail({ file }) {
				this.$message.error(`文件 ${file.name} 上传失败`)
			},
			// 头像上传成功
			onSuccess(context) {
				if (context.response.status == 0) {
					this.$store.state.user.userInfoDataUpdate.user_photo = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 合同上传成功
			trialOnSuccess(context) {
				if (context.response.status == 0) {
					this.$store.state.user.userInfoDataUpdate.trial_contract = context.response.data
					this.$message.success(context.response.message)
				} else {
					this.$message.error(context.response.message)
				}
			},
			// 更换相册
			uploadImg() {
				this.userPhotoShow = false
			},
			// 重置按钮
			resetting() {
				this.$store.dispatch('user/getUser', this.$route.query.id).then(() => {
					this.$message.success('重置成功')
				})
			},
			// 请求获取用户信息
			getUserInfo(id){
				this.$store.dispatch('user/getUser', id).then(res => {
					if(res.status === 0){
						this.formData = res.data[1]
						// 判断是否有头像
						if (this.formData.user_photo) {
							this.user_photo = serveHttp + this.formData.user_photo
							this.userPhotoShow = true
						}
						this.department = this.formData.id_department1 + '.' + this.formData.id_department2
					}
				})
			}
		},
		created() {
			// 请求权限信息
			this.$store.dispatch('user/getActivityList').then((res) => {
				if (res.status === 0) {
					let arr = res.data
					for (let i = 0; i < arr.length; i++) {
						this.authorityOptions[i] = {}
						this.authorityOptions[i].value = arr[i].authority_id
						this.authorityOptions[i].label = arr[i].a_name
					}
				} else {
					this.$message.error(res.message)
				}
				this.getPositionOptions()
			})
			this.serveHttp = serveHttp
		}
	}
</script>